<template>
  <div class="login">
      <div style="​position: relative" class="left">
      <div
        style="
          position: absolute;
          top: 40px;
          left: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 28px;
        "
      >
        <img style="width: 262px" src="@/assets/logo@3x.png" alt="" srcset="" />
        <div
          style="
            width: 10px;
            height: 10px;
            margin: 0 13px;
            background: #fff;
            border: 100%;
            border-radius: 100%;
          "
        ></div>
        施工单位管理系统
      </div>
      <img class="leftBanner" src="../assets/login.png" alt="" />
    </div>
    <div class="right">
      <div  class="loginCard">
        <div class="loginTitle">欢迎登录</div>
          <div class="tab">
          <div @click="tab(1)">
            手机登录
            <span v-if="active == 1" class="block"></span>
          </div>
          <div @click="tab(2)">
            账号登录
            <span v-if="active == 2" class="block"></span>
          </div>
        </div>
        <div class="form" v-if="active == 2">
          <el-form :model="loginFrom" :rules="loginRules" ref="ruleForm">
            <el-form-item prop="username">
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入账号"
                v-model="loginFrom.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
                v-model="loginFrom.password"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item prop="code">
                        <div class="code">
                            <el-input prefix-icon="el-icon-coordinate" placeholder="请输入验证码" v-model="loginFrom.code"></el-input>
                            <div class="codeImg" @click="getcodeimg">
                                <img :src="codeUrl" alt="">
                            </div>
                        </div>
                    </el-form-item> -->
          </el-form>
          <div class="loginBtn">
            <!-- <el-checkbox label="记住密码" name="type"></el-checkbox> -->
            <el-button @click="$router.push('/register')">注册账号</el-button>
            <!-- <div @click="$p.url('/forget')">忘记密码</div> -->
          </div>
          <div class="loginBtn">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </div>
        <div class="form" v-if="active == 1">
          <div class="caImg">
            <!-- <img src="../assets/img/password.png" alt=""> -->
          </div>
          <!-- <div class="loginBtn">
                    <el-button type="primary" @click="login">CA登录</el-button>
                </div> -->
        </div>
      </div>
      <!-- <div v-html="cion"></div> -->
    </div>
  </div>
</template>

<script>
import { login, logins, getrenzheng } from "@/api/user";
import { personalrealname } from "@/api/personalrealname";

const Base64 = require('js-base64').Base64
export default {
  data() {
    return {
      active: 2,
      loginFrom: {
        // username:'18838955975',
        // password:'123',
        // username: "wang",
        // password: "111111",
           username: "",
        password: "",
        // user_id:sessionStorage.getItem("user_id"),
        id: "",
      },
      codeUrl: "",
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // code: [
        //     { required: true, message: '请输入验证码', trigger: 'blur' },
        // ],
      },
      captchaOnOff: false,
      cion:"",
    };
  },
  mounted() {
//        var str="PGh0bWwgbGFuZz0nZW4nPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSdVVEYtOCc+CiAgPHRpdGxlPuWFrOWRiuWGheWuueaWh+ahozwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+Cjx0YWJsZSBjbGFzcz0iQ29udGVudCI+DQogICAgPHRib2R5Pg0KICAgIDx0cj4NCiAgICAgICAgPHRkPjxwIHN0eWxlPSJ0ZXh0LWluZGVudDogMmVtIj7kuLrkvr/kuo7kvpvlupTllYblj4rml7bkuobop6PmlL/lupzph4fotK3kv6Hmga/vvIzmoLnmja7jgIrmsrPljZfnnIHotKLmlL/ljoXlhbPkuo7lvIDlsZXmlL/lupzph4fotK3mhI/lkJHlhazlvIDlt6XkvZznmoTpgJrnn6XjgIvvvIjosavotKLotK3jgJAyMDIw44CROOWPt++8ieetieacieWFs+inhOWumu+8jOeOsOWwhuays+WNl+enkeaKgOWkp+WtpiAyMDIy5bm0MTHvvIjoh7PvvIkxMuaciOmHh+i0reaEj+WQkeWFrOW8gOWmguS4i++8mjwvcD48L3RkPg0KICAgIDwvdHI+DQogICAgPHRyPg0KICAgICAgICA8dGQgY2xhc3M9InN1b2ppbiI+DQogICAgICAgICAgICA8dGFibGUgYm9yZGVyPSIxIiBjZWxscGFkZGluZz0iMCIgY2VsbHNwYWNpbmc9IjAiIHN0eWxlPSJ3aWR0aDogOTAlO3RleHQtYWxpZ246IGNlbnRlcjsiPg0KICAgICAgICAgICAgICAgIDx0ciBzdHlsZT0iaGVpZ2h0OiAzMHB4O2xpbmUtaGVpZ2h0OiAzMHB4OyI+DQogICAgICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT0id2lkdGg6NSUiPuW6j+WPtzwvdGQ+DQogICAgICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT0id2lkdGg6MTUlIj7ph4fotK3ljZXkvY3lkI3np7A8L3RkPg0KICAgICAgICAgICAgICAgICAgICA8dGQgc3R5bGU9IndpZHRoOjE1JSI+6YeH6LSt6aG555uu5ZCN56ewPC90ZD4NCiAgICAgICAgICAgICAgICAgICAgPHRkIHN0eWxlPSJ3aWR0aDozMCUiPumHh+i0remcgOaxguamguWGtTwvdGQ+DQogICAgICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT0id2lkdGg6MTAlIj48cCBjbGFzcz0iaGt5cyI+6aKE566X6YeR6aKdPC9wPjxwIGNsYXNzPSJoa3lzIj7vvIjkuIflhYPvvIk8L3A+PC90ZD4NCiAgICAgICAgICAgICAgICAgICAgPHRkIHN0eWxlPSJ3aWR0aDoxMCUiPumihOiuoemHh+i0reaXtumXtDwvdGQ+DQogICAgICAgICAgICAgICAgICAgIDx0ZCBzdHlsZT0id2lkdGg6MjAlIj7lpIfms6g8L3RkPg0KICAgICAgICAgICAgICAgIDwvdHI+DQogICAgICAgICAgICAgICAgICAgICAgICA8dHI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRkPjE8L3RkPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD7msrPljZfnp5HmioDlpKflraY8L3RkPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD7msrPljZfnp5HmioDlpKflraYg6auY56uv6KOF5aSH56eR56CU5Yib5paw5Zui6Zif5bu66K6+6K6+5aSH5Y+K6L2v5Lu26aG555uuPC90ZD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dGQ+PHRleHRhcmVhIGNsYXNzPSJUZXh0QXJlYVN0eWxlIiBzdHlsZT0id2lkdGg6IDkwJTsgaGVpZ2h0OiAxMDBweDsiIHJlYWRvbmx5PumrmOeyvuW6puWIh+WJiuWKm+a1i+mHj+ezu+e7n+OAgea1geS9k+WKm+WtpuS7v+ecn+ezu+e7n+OAgeaVsOaOp+WKoOW3peaVsOWtl+WtqueUn+i9r+S7tuezu+e7n+etiTwvdGV4dGFyZWE+PC90ZD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dGQ+MTg4LjcwPC90ZD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dGQ+IDIwMjLlubQxMuaciDwvdGQ+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRkPjx0ZXh0YXJlYSBjbGFzcz0iVGV4dEFyZWFTdHlsZSIgc3R5bGU9IndpZHRoOiA5MCU7IGhlaWdodDogMTAwcHg7IiByZWFkb25seT48L3RleHRhcmVhPjwvdGQ+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3RyPg0KICAgICAgICAgICAgPC90YWJsZT4NCiAgICAgICAgPC90ZD4NCiAgICA8L3RyPg0KICAgIDx0cj4NCiAgICAgICAgPHRkIGNsYXNzPSJzdW9qaW4iPjxwIHN0eWxlPSJsaW5lLWhlaWdodDo0MHB4O2ZvbnQtd2VpZ2h0OmJvbGRlcjtiYWNrZ3JvdW5kOmNvcm5zaWxrO2NvbG9yOmNyaW1zb247Ym9yZGVyOjFweCBzb2xpZCBjcmltc29uO2ZvbnQtc2l6ZToxNHB4O3RleHQtYWxpZ246IGNlbnRlcjt3aWR0aDogOTAlIj7mnKzmrKHlhazlvIDnmoTph4fotK3mhI/lkJHmmK/mnKzljZXkvY3mlL/lupzph4fotK3lt6XkvZznmoTliJ3mraXlronmjpLvvIzlhbfkvZPph4fotK3pobnnm67mg4XlhrXku6Xnm7jlhbPph4fotK3lhazlkYrlkozph4fotK3mlofku7bkuLrlh4bjgII8L3A+PC90ZD4NCiAgICA8L3RyPg0KICAgIDx0cj48dGQgc3R5bGU9InBhZGRpbmctbGVmdDogNzAlIj7msrPljZfnp5HmioDlpKflraY8L3RkPjwvdHI+DQogICAgPHRyPjx0ZCBzdHlsZT0icGFkZGluZy1sZWZ0OiA3MCUiPjIwMjLlubQxMeaciDE05pelPC90ZD48L3RyPg0KICAgIDwvdGJvZHk+DQo8L3RhYmxlPg0KPC9ib2R5Pgo8L2h0bWw+"

// const oxStr = Base64.decode(str);//解密
// this.cion= Base64.decode(str);//解密
// console.log("解密",oxStr)
    this.getcodeimg();
  },
  methods: {
    getcodeimg() {
      //  console.log("1231asdas",sessionStorage.getItem("usernames"))
    if(sessionStorage.getItem("usernames")!==null){
      this.loginFrom.username=sessionStorage.getItem("usernames")
    }
      // getcode().then(res=>{
      //     this.codeUrl = window.URL.createObjectURL(res)
      // })
    },
    login() {
      login(this.loginFrom).then((res) => {
        if (res.data.code == 1) {
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("username", res.data.data.username);
          sessionStorage.setItem("avatar", res.data.data.avatar);
          sessionStorage.setItem("cardname", res.data.data.cardname);
          sessionStorage.setItem("company_name", res.data.data.company_name);
          sessionStorage.setItem("unify_code", res.data.data.unify_code);
          if (res.data.data.qyrz == 1 ) {
              this.$router.push({
              path: "/",
            });
           
          }else {
           this.$message({
              showClose: true,
              message: "企业未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
            return;
          }

          return;

          if (res.data.data.grrz == 0) {
            this.$message({
              showClose: true,
              message: "个人未认证",
              type: "warning",
            });
            this.$router.push({
              path: "/RealName/PersonalRealname",
            });
          } else {
          }
        }else{
               this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
        }
      });
    },
    getrenzhengs(i) {
      var bbc = { unify_code: i };
      getrenzheng(bbc).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.comstate == 0) {
            this.$router.push({ path: "/RealName/PersonalRealname" });
            return;
          }
          if (res.data.data.comstate == 1) {
            this.$router.push({ path: "/RealName/PersonalRealnames" });
            return;
          }
          if (res.data.data.comstate == 2 && res.data.data.status == 2) {
            this.$router.push({
              path: "/",
            });
            return;
          }
          if (res.data.data.comstate == 3) {
            this.$router.push({ path: "/RealName/PersonalRealnames" });
          } else {
            this.$router.push({
              path: "/",
            });
          }
          //   this.$message({
          //     showClose: true,
          //     message: res.data.msg,
          //     type: "success",
          //   });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
        // sessionStorage.setItem('token',res.data.data.token)
        // sessionStorage.setItem('user_id',res.data.data.id)
        // this.$router.push({
        //     path:'/'
        // })
      });
    },
    tab(i) {
      this.active = i;
      personalrealname(this.loginFrom).then((res) => {
        console.log(res);
        // sessionStorage.setItem('token',res.data.data.token)
        // sessionStorage.setItem('user_id',res.data.data.id)
        // this.$router.push({
        //     path:'/'
        // })
      });
    },
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("blobToBase64 error"));
        };
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #5a7aec;
  .left {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .leftBanner {
      width: 690px;
      height: 690px;
    }
  }
  .right {
    flex: 1;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .loginCard {
       .tab {
        display: flex;
        align-items: center;
        // justify-content: space-evenly;
        padding-left: 30px;
        div {
          font-size: 18px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          width: 30%;
          height: 60px;
          line-height: 75px;
          text-align: center;
          position: relative;
          cursor: pointer;
          span {
            display: inline-block;
            width: 100%;
            height: 3px;
            background: #1890ff;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      .title {
        margin-top: 10px;
        margin-left: 150px;
      }
      .form {
        width: 376px;
        height: 402px;
        padding: 30px;
        background: #f5f5f5;
        .caImg {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          margin-top: 5px;
          margin-bottom: 30px;
        }
      }
      .loginTitle {
        font-size: 36px;
        line-height: 90px;
        margin: 30px;
        margin-left: 130px;
      }
      .isPassword {
        font-size: 12px;
        display: flex;
        padding-left: 10px;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
        & > div {
          cursor: pointer;
        }
        & > div:nth-child(1) {
          color: #1890ff;
        }
      }
      .el-form-item__error {
        padding-left: 10px;
      }
      .code {
        display: flex;
        align-items: center;
        .codeImg {
          height: 40px;
        }
      }
      .loginBtn {
        padding-top: 23px;
        display: flex;
        justify-content: center;
        button {
          width: 300px;
          background: #1890ff;
          color: #fff;
        }
      }
    }
  }
}
</style>